<style>
    .checkRoom {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 10px;
        overflow-y: auto;
    }
    .checkRoom .box {
        width: 150px;    
        height: 50px;
        line-height: 30px;
        text-align: left;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 4px;
        border: 1px solid #e8e8e8;
        cursor: pointer;
        display: inline-block;    
        vertical-align: top;
        margin-right: 10px;
        margin-bottom: 10px;
        transition: all .3s linear;
    }
    .checkRoom .box:hover {
        box-shadow: 0 0 7px rgba(0,0,0,.15);
    }
    .checkRoom .box:active {
        background-color: #e8e8e8;
    }
    .checkRoom .tables {
        width: 1020px;
        margin: 0 auto;
    }
    .checkRoom .tables .undone {
        width: 500px;
        margin-right: 10px;
        display: inline-block;
        vertical-align: top;
    }
    .checkRoom .tables .done {
        width: 500px;
        display: inline-block;
        vertical-align: top;
    }
</style>

<body>
    <div class="checkRoom">
        <el-divider content-position="left">
            {{ showAllProject ? '检查项目列表' : '当前检查项目' }}
        </el-divider>
        <template v-if="showAllProject">
            <div :class="['box']" @click="handleChangeProject(index)"
                v-for="(item, index) in projectList" :key="index" >
                {{ item.name }}
            </div>
        </template>
        <template v-else>
            <div class="box" style="color: #67C23A;">
                <i class="el-icon-finished" style="font-size: 20px; margin-right: 10px;"></i>
                {{ projectList[currentProjectIndex].name }}
            </div>
            <el-button type="primary" icon="el-icon-s-help" size="small" @click="showAllProject = true">展开全部项目</el-button>
        </template>
        
        <el-divider content-position="left">
            {{ projectList[currentProjectIndex] ? projectList[currentProjectIndex].name + '人员信息' : '人员信息' }}
        </el-divider>
        <div v-if="!projectList[currentProjectIndex]" style="font-size: 14px;">
            请选择检查列表
        </div>
        <div class="tables" v-if="currentProjectIndex != null">
            <el-table :data="patList.undone" border class="undone">
                <el-table-column label="正在排队人员" align="center">
                    <el-table-column
                        prop="seq"
                        align="center"
                        label="排序号"/>
                    <el-table-column
                        prop="patientName"
                        align="center"
                        label="姓名"/>
                    <el-table-column 
                        align="center"
                        label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleFinishCheck(scope.row)">完成检查</el-button>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <el-table :data="patList.done" border class="done">
                <el-table-column label="已完成人员" align="center">
                    <el-table-column
                        prop="seq"
                        align="center"
                        label="排序号"/>
                    <el-table-column
                        prop="patientName"
                        align="center"
                        label="姓名"/>
                </el-table-column>
            </el-table>
        </div>


    </div>
</body>

<script>
require([
    'jquery',
    'bbcare'
], function($, $bb) {

    var URL = $bb.baseUrl('followup')

    var vm = new Vue({
        el: '.checkRoom',
        data: {
            projectList: [],
            currentProjectIndex: null,
            showAllProject: true,
            patList: {
                done: [],
                undone: []
            },
            queueId: ''
        },
        created: function () {
            this.getProjectList()
        },
        watch: {
            'currentProjectIndex': function (num) {
                var queueId = this.projectList[num].id
                this.queueId = queueId
                this.getPatList(queueId)
            }
        },
        methods: {
            /**
             * 选择当前项目
             * @param { number } index
             */
            handleChangeProject: function (index) {
                this.showAllProject = false
                this.currentProjectIndex = index
            },
            /**
             * 点击完成检查
             */
            handleFinishCheck: function (row) {
                var that = this
                this.$confirm('确认该患者完成问诊？', '提示', {
                    type: 'success',
                    confirmButtonText: '确认完成',
                    cancelButtonText: '未完成',
                }).then(function () {
                    that.patientDone(row.seq, that)
                }).catch(function () {})
            },
            /**
             * 患者完成问诊
             * @param { number } seq
             */
            patientDone: function (seq, that) {
                $bb.ajax({
                    url: URL + 'followup/queuing/office2/done?seq=' + seq ,
                    methods: 'POST',
                    success: function (res) {
                        that.getPatList(that.queueId)
                    }
                })
            },
            /**
             * 获取检查项目的列表
             */
            getProjectList: function () {
                var that = this
                $bb.ajax({
                    url: URL + 'followup/queuing/office2/q',
                    methods: 'POST',
                    success: function (res) {
                        that.projectList = res
                    }
                })
            },
            /**
             * 
             */
            getPatList: function (id) {
                var that = this
                $bb.ajax({
                    url: URL + 'followup/queuing/office2/pat?queue_id=' + id,
                    methods: 'POST',
                    success: function (res) {
                        that.patList.done = res.done
                        that.patList.undone = res.undone
                    }
                })
            }
        }
    })


});
</script>